<template>
  <el-dialog title="步骤日志" :visible.sync="visible" :close-on-click-modal="false" width="1550px">
    <div class="app-container">
      <div class="filter-container">
        <div style="float: right;">
          <el-button icon="el-icon-refresh" circle @click="handleFilterQuery" />
        </div>
      </div>

      <!-- 数据表格 -->
      <el-table
        :key="tableKey"
        v-loading="loading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        scrollbar-always-on="true"
      >
        <el-table-column type="selection" width="50px" align="center" />
        <el-table-column label="序号" type="index" width="50px" align="center" />
        <el-table-column label="步骤名称" min-width="70px" align="center">
          <template v-slot="{row}">
            <span>{{ row.stepName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="步骤描述" min-width="70px" align="center">
          <template v-slot="{row}">
            <span>{{ row.stepDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="步骤ID" min-width="70px" align="center">
          <template v-slot="{row}">
            <span>{{ row.stepId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行状态" class-name="status-col" min-width="70px">
          <template v-slot="{row}">
            {{ row.status }}
          </template>
        </el-table-column>
        <el-table-column label="执行结果" class-name="status-col" min-width="70px">
          <template v-slot="{row}">
            {{ row.stepMsg }}
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="160px" align="center">
          <template v-slot="{row}">
            <span>{{ row.startTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="160px" align="center">
          <template v-slot="{row}">
            <span>{{ row.endTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="90px" class-name="small-padding fixed-width">
          <template v-slot="{row,$index}">
            <el-button size="mini" type="info" icon="el-icon-document" @click="handleDetail(row, $index)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格分页 -->
      <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="handleInit" />
    </div>
  </el-dialog>
</template>

<script>
import { handleStepPageList } from './api'
import permission from '@/directive/permission/index' // 权限判断指令
import waves from '@/directive/waves' // waves directive
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'

export default {
  // 当前页面名称（组件）
  name: 'StepLog',
  // 引用的组件
  components: { Pagination },
  // 指令
  directives: { permission, waves },
  filters: {},
  // props属性
  props: {
    stepLogDataParams: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 列表table的key
      tableKey: 0,
      // 遮罩层
      loading: true,
      // table数据对象
      list: [],
      // 总条数
      total: 0,
      // 列表查询参数对象
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        param: {
          serialNo: undefined
        }
      },
      // 表单数据对象
      formData: {},
      // 是否显示弹出层（这里这个变量创建一个新的，因为props是单向传输数据，而弹出层关闭时会修改visible的值）
      visible: false,
      // 弹出层状态
      state: ''
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 用于初始化参数
    init() {
      this.visible = this.stepLogDataParams.visible
      this.listQuery.param.serialNo = this.stepLogDataParams.serialNo
    },
    handleInit() {
      this.init()
      this.loading = true
      handleStepPageList(this.listQuery).then(res => {
        this.list = res.data
        if (res.total) {
          this.total = Number(res.total)
        }
        this.loading = false
      })
    },
    // 条件查询table数据
    handleFilterQuery() {
      this.listQuery.pageNum = 1
      this.handleInit()
    },
    // 详情
    handleDetail(row) {
      this.$parent.handleTrace({ visible: true, jobTrace: row.stepTrace })
      // this.visible = false
    },
    // 关闭弹出层
    handleClose() {
      this.visible = false
      // 这里要刷新父页面的列表
      this.$parent.handleFilterQuery()
    }
  }
}
</script>
